{% extends "base.html" %}

{% block title %}用户管理 - 告警系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 操作提示 -->
    {% if error %}
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-circle me-2"></i> {{ error }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endif %}
    
    {% if success %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-2"></i> {{ success }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endif %}
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0"><i class="bi bi-people-fill me-2"></i>用户管理</h2>
        <div>
            <button class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#addUserModal">
                <i class="bi bi-plus-lg me-1"></i> 添加用户
            </button>
            <button class="btn btn-outline-secondary" onclick="location.reload()">
                <i class="bi bi-arrow-clockwise"></i> 刷新
            </button>
        </div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-container mb-4">
        <form action="/adminmanage" method="get" class="row g-3">
            <div class="col-md-8">
                <input type="text" name="search" class="form-control" placeholder="搜索用户名、姓名或联系方式" value="{{ search }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search me-1"></i> 搜索
                </button>
            </div>
            <div class="col-md-2">
                <a href="/adminmanage" class="btn btn-outline-secondary w-100">
                    <i class="bi bi-arrow-counterclockwise me-1"></i> 重置
                </a>
            </div>
        </form>
    </div>
    
    <!-- 用户列表表格 -->
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="bg-primary text-white">
                    <tr>
                        <th class="ps-4">序号</th>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>联系方式</th>
                        <th>角色</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody id="userTableBody">
                    {% for user in users %}
                    <tr>
                        <td class="ps-4 fw-medium">{{ (current_page-1)*10 + loop.index }}</td>
                        <td class="fw-medium">{{ user.UserName }}</td>
                        <td>{{ user.RealName or "未设置" }}</td>
                        <td>{{ user.Contact or "未设置" }}</td>
                        <td>
                            {% if user.Role == "admin" %}
                            <span class="badge bg-warning text-dark">
                                 <i class="bi bi-star-fill"></i> 管理员
                            </span>
                            {% elif user.Role == "deployer" %}  
                            <span class="badge bg-info">
                                <i class="bi bi-gear-fill"></i> 部署人员
                            </span>
                            {% else %}
                            <span class="badge bg-secondary">
                                <i class="bi bi-person"></i> 普通用户
                            </span>
                {% endif %}
                        </td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center">
                                <a href="/editadmin/{{ user.UserId }}" class="btn btn-sm btn-outline-primary me-2">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                                <button class="btn btn-sm btn-outline-danger delete-btn" 
                                        data-userid="{{ user.UserId }}" 
                                        data-username="{{ user.UserName }}">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <div class="alert alert-info mb-0">
                                <i class="bi bi-info-circle me-2"></i> 没有找到用户
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 分页 -->
    {% if total_pages > 1 %}
    <div class="pagination-container d-flex justify-content-center mt-4">
        <nav>
            <ul class="pagination">
                <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
                    <a class="page-link" href="/adminmanage?page=1&search={{ search or '' }}">首页</a>
                </li>
                <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
                    <a class="page-link" href="/adminmanage?page={{ current_page - 1 }}&search={{ search or '' }}">上一页</a>
                </li>
                
                {% for p in range(1, total_pages + 1) %}
                    {% if p >= current_page - 2 and p <= current_page + 2 %}
                    <li class="page-item {% if p == current_page %}active{% endif %}">
                        <a class="page-link" href="/adminmanage?page={{ p }}&search={{ search or '' }}">{{ p }}</a>
                    </li>
                    {% endif %}
                {% endfor %}
                
                <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
                    <a class="page-link" href="/adminmanage?page={{ current_page + 1 }}&search={{ search or '' }}">下一页</a>
                </li>
                <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
                    <a class="page-link" href="/adminmanage?page={{ total_pages }}&search={{ search or '' }}">尾页</a>
                </li>
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<!-- 用户模态框 -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="addUserModalLabel">
                    <i class="bi bi-person-plus me-2"></i>添加新用户
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/add_user" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="UserName" class="form-label fw-medium">用户名</label>
                            <input type="text" class="form-control" id="UserName" name="UserName" required
                                   placeholder="输入用户名" maxlength="10">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="Password" class="form-label fw-medium">密码</label>
                            <input type="password" class="form-control" id="Password" name="Password" required
                                   placeholder="输入密码">
                            <div class="form-text">密码长度至少为6位</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="RealName" class="form-label fw-medium">真实姓名</label>
                            <input type="text" class="form-control" id="RealName" name="RealName"
                                   placeholder="输入真实姓名">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="Contact" class="form-label fw-medium">联系方式</label>
                            <input type="text" class="form-control" id="Contact" name="Contact"
                                   placeholder="输入联系方式" maxlength="15">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="Role" class="form-label fw-medium">用户角色</label>
                            <select class="form-select" id="Role" name="Role" required>
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                                <option value="deployer">部署人员</option> 
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">角色说明</label>
                            <div class="alert alert-info p-2 mb-0">
                                <ul class="mb-0">
                                    <li>管理员：拥有所有权限</li>
                                    <li>普通用户：查看权限</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-person-plus me-1"></i> 添加用户
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteConfirmModalLabel">
                    <i class="bi bi-exclamation-triangle me-2"></i>确认删除
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-exclamation-circle fs-1 text-danger me-3"></i>
                    <div>
                        <h5 class="mb-1">确定要删除用户吗？</h5>
                        <p class="mb-0">此操作将永久删除用户 <strong id="deleteUserName"></strong>，且不可恢复。</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle me-1"></i> 取消
                </button>
                <a id="confirmDeleteBtn" href="#" class="btn btn-danger">
                    <i class="bi bi-trash me-1"></i> 确认删除
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // 删除确认
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.getAttribute('data-userid');
            const userName = this.getAttribute('data-username');
            
            document.getElementById('deleteUserName').textContent = userName;
            document.getElementById('confirmDeleteBtn').href = `/delete_user/${userId}`;
            
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
            deleteModal.show();
        });
    });
    
    // 自动关闭提示
    setTimeout(() => {
        document.querySelectorAll('.alert').forEach(alert => {
            new bootstrap.Alert(alert).close();
        });
    }, 5000);
    
    // 表单提交后关闭模态框
    document.querySelector('#addUserModal form').addEventListener('submit', function() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('addUserModal'));
        if (modal) {
            modal.hide();
        }
    });
</script>
{% endblock %}